import 'package:flutter/material.dart';
import 'package:yp/config/config.dart';
import 'package:yp/router.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:timelines/timelines.dart';
import 'logic.dart';
import 'state.dart';

class RefundProgressPage extends StatefulWidget {
  @override
  _RefundProgressPageState createState() => _RefundProgressPageState();
}

class _RefundProgressPageState extends State<RefundProgressPage> {
  final RefundProgressLogic logic = Get.put(RefundProgressLogic());

  final RefundProgressState state = Get.find<RefundProgressLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        backgroundColor: Colors.white,
        brightness: Brightness.light,
        iconTheme: IconThemeData(color: Colors.black),
        title: Text(
          "售后进度",
          style: TextStyle(color: Colors.black, fontSize: 32.sp),
        ),
        centerTitle: true,
        elevation: 0,
      ),
      body: GetBuilder<RefundProgressLogic>(
        builder: (logic) {
          return Column(
            children: [
              Expanded(
                child: ListView(
                  shrinkWrap: true,
                  primary: true,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 15.w, vertical: 20.w),
                          child: FixedTimeline.tileBuilder(
                            theme: TimelineThemeData(
                              nodePosition: 0,
                              color: Color(0xff999999),
                              indicatorTheme: IndicatorThemeData(
                                color: Colors.greenAccent,
                                position: 0.1,
                                size: 20.0,
                              ),
                              connectorTheme: ConnectorThemeData(
                                color: Colors.greenAccent,
                                thickness: 2.5,
                              ),

                            ),
                            builder: TimelineTileBuilder.connected(
                              connectionDirection: ConnectionDirection.before,

                              itemCount: state.list.length,
                              contentsBuilder: (_, index) {
                                var item = state.list[index];
                                return Container(
                                  margin: index == 1
                                      ? EdgeInsets.only(bottom: 30.w, left: 20.w)
                                      : EdgeInsets.only(bottom: 30.w, left: 20.w),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Column(
                                        mainAxisAlignment: MainAxisAlignment.start,
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          Container(
                                            width:650.w,
                                            child: Row(
                                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                              children: [
                                                Text(
                                                  "${item['oper_desc']}",
                                                  style: TextStyle(
                                                    fontSize: 26.sp,
                                                    color: Color(0xff666666),
                                                  ),
                                                ),

                                                Text(
                                                  "${item['create_dtme']}",
                                                  style: TextStyle(
                                                    fontSize: 24.sp,
                                                    color: Color(0xff999999),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                          Container(
                                            width: 650.w,
                                            child: Text(
                                              "${item['oper_info']}",
                                              style: TextStyle(
                                                fontSize: 24.sp,
                                                color: Color(0xff888888),
                                              ),
                                              overflow: TextOverflow.ellipsis,
                                              maxLines: 2,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                );
                              },
                              indicatorBuilder: (_, index) {
                                var item = state.list[index];

                                return DotIndicator(
                                  size: 16,
                                  color:item['oper_desc']== '审核失败'?Color(0xffEF2F45):Color(0xffE8E8E8),
                                );
                              },
                              connectorBuilder: (_, index, ___) => SolidLineConnector(
                                color: Color(0xfff0f0f0),
                                space: 1,
                              ),
                            ),
                          ),
                        )
                      ],
                    )
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}
